<template>
    <el-container style="height: 100%">
      <el-header>
        <h1>Neusoft&nbsp;&nbsp;东软体检报告管理系统</h1>
        <p>医生：{{ doctor.realName }}</p>
      </el-header>
      <el-container>
        <el-aside width="260px">
          <h4>体检用户查询</h4>
          <el-form ref="formRef" :model="selectForm" label-width="auto">
            <el-form-item label="手机号码">
              <el-input
                v-model="selectForm.userId"
                placeholder="手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input
                v-model="selectForm.realName"
                placeholder="姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="selectForm.sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="套餐类型">
              <el-select v-model="selectForm.smId" placeholder="套餐类型">
                <el-option
                  v-for="setmeal in setmealArr"
                  :key="setmeal.smId"
                  :label="setmeal.name"
                  :value="setmeal.smId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="体检日期">
              <el-date-picker
                v-model="selectForm.orderDate"
                type="date"
                placeholder="体检日期"
                style="width: 100%"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="是否归档">
              <el-radio-group v-model="selectForm.state">
                <el-radio border label="1">未归档</el-radio>
                <el-radio border label="2">已归档</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doSelect">查询</el-button>
              <el-button type="warning" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-aside>
        <el-main>
          <el-table :data="ordersPageResponseDto.list" style="width: 100%">
            <el-table-column prop="orderId" label="预约编号" width="120" />
            <el-table-column prop="userId" label="手机号码" width="140" />
            <el-table-column prop="users.realName" label="真实姓名" width="120" />
            <el-table-column label="性别" width="60">
              <template #default="scope">
                <span>{{ scope.row.users.sex == 1 ? "男" : "女" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="setmeal.name" label="套餐类型" />
            <el-table-column prop="hospital.name" label="体检医院" width="220" />
            <el-table-column prop="orderDate" label="体检日期" />
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button type="text" size="small" @click="ciReport(scope.row)"
                  >{{scope.row.state==1?'编辑体检报告':'查看体检报告'}}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next, total"
            :total="ordersPageResponseDto.totalRow"
            :page-size="ordersPageResponseDto.maxPageNum"
            style="margin-top: 20px"
            @current-change="currentChange"
          >
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script>
  import { reactive, toRefs } from "vue";
  import { useRouter } from "vue-router";
  import { getSessionStorage } from "../common.js";
  import axios from "axios";
  axios.defaults.baseURL = "http://localhost:8088/tijiancms/";
  
  export default {
    setup() {
      const router = useRouter();
  
      const state = reactive({
        doctor: getSessionStorage("doctor"),
        selectForm: {
          userId: "",
          realName: "",
          sex: "",
          smId: "",
          orderDate: "",
          state: "1",
        },
        setmealArr: [],
        ordersPageResponseDto: {},
      });
  
      listSetmeal();
      function listSetmeal() {
        axios
          .post("setmeal/listSetmeal")
          .then((response) => {
            if(re)
            state.setmealArr = response.data;
          })
          .catch((error) => {
            console.error(error);
          });
      }
  
      listOrders(1);
      function listOrders(pageNum) {
        state.selectForm.pageNum = pageNum;
        state.selectForm.maxPageNum = 10;
        axios
          .post("orders/listOrders", state.selectForm)
          .then((response) => {
            state.ordersPageResponseDto = response.data;
          })
          .catch((error) => {
            console.error(error);
          });
      }
  
      function ciReport(row) {
        axios
          .post("ciReport/createReportTemplate", {
            orderId: row.orderId,
            smId: row.smId
          })
          .then((response) => {
            if(response.data==1){
              router.push({path:'/ordersContent',query:{orderId:row.orderId}});
            }else{
              alert('生成报告模板失败！');
            }
          })
          .catch((error) => {
            console.error(error);
          });
      }
  
      function doSelect() {
        console.log(state.selectForm);
        listOrders(1);
      }
  
      function currentChange(pageNum) {
        listOrders(pageNum);
      }
  
      function reset() {
        state.selectForm = {
          userId: "",
          realName: "",
          sex: "",
          smId: "",
          orderDate: "",
          state: "1",
        };
      }
  
      return {
        ...toRefs(state),
        ciReport,
        doSelect,
        listOrders,
        currentChange,
        reset,
      };
    },
  };
  </script>
  
  <style scoped>
  .el-header {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 60px;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1c51a3;
  }
  
  .el-header h1 {
    font-size: 22px;
    font-weight: 700;
  }
  .el-header p {
    font-size: 16px;
  }
  
  .el-aside {
    background-color: #d3dce6;
    box-sizing: border-box;
    padding: 20px;
  }
  .el-aside h4 {
    color: #555;
    margin-bottom: 20px;
  }
  
  .el-main {
    background-color: #e9eef3;
  }
  </style>